import React from 'react'
import classNames from 'classnames'

import { Flex } from 'antd-mobile'

import styles from './index.module.css'

// 条件筛选栏标题数组：
const titleList = [
  { title: '区域', type: 'area' },
  { title: '方式', type: 'mode' },
  { title: '租金', type: 'price' },
  { title: '筛选', type: 'more' }
]

export default function FilterTitle(props) {
  const { selectedStatus } = props
  const handelClick = type => {
    // console.log(type)
    props.titleClick(type)
  }

  return (
    <Flex align="center" className={styles.root}>
      {titleList.map(e => {
        return (
          <Flex.Item
            key={e.type}
            onClick={() => {
              handelClick(e.type)
            }}
          >
            {/* 选中类名： selected [styles.dropdown, styles.selected].join(' ')*/}
            <span
              className={classNames(styles.dropdown, {
                [styles.selected]: selectedStatus[e.type]
              })}
            >
              <span>{e.title}</span>
              <i className="iconfont icon-arrow" />
            </span>
          </Flex.Item>
        )
      })}
    </Flex>
  )
}
